<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <module-header name="app" value="/doctor" is-telescreen />

    <main-content>
      <n-space vertical class="w-3/5">
        <div class="text-xl ">选择病人</div>
        <div class="flex justify-center">
          <n-button class="cursor-pointer" type="primary" @click="searchPatient">
            搜索
          </n-button>
          <n-input v-model:value="searchData" placeholder="输入姓名或身份证号">
            <template #suffix>
              <n-icon :component="Search" class="cursor-pointer" @click="searchPatient" />
            </template>
          </n-input>
        </div>
        <div v-if="pInfo.pName != ''">
          {{ pInfo.pName }}&nbsp;{{ pInfo.pCardId }}
        </div>
        <div>
          <n-date-picker v-model:value="pStartTime" placeholder="治疗日期" />
        </div>
        <div v-for="(item,i) in ProcessRef.items" :key="i" class="mt-8">
          <div class="flex justify-between items-center">
            <div class="text-xl ">治疗项目{{ i+1 }}</div>
            <div class="flex justify-center">
              <div class=" mr-4 animal" @click="upItem(i)">上移</div>
              <div class=" mr-4 animal" @click="downItem(i)">下移</div>
              <div class=" mr-4 animal" @click="deleteItem(i)">删除</div>
            </div>
          </div>
          <div>
            <n-input v-model:value="item.name" placeholder="项目名" />
            <n-input v-model:value="item.therapyAddress" placeholder="治疗地点" />
            <n-input v-model:value="item.intervalTime" placeholder="间隔时间">
              <template #suffix>
                分钟
              </template>
            </n-input>
          </div>
        </div>
        <div class="flex justify-end mt-4">
          <n-button class="text-white mr-4" type="primary" @click="addItem">新增项目</n-button>
          <n-button class="text-white mr-4" type="primary" @click="confirm">保存</n-button>
        </div>
      </n-space>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>

import { ref, h, reactive } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider, NIcon, NInput, NButton, NDataTable, NModal, NDatePicker } from 'naive-ui'
import { Search } from '@vicons/ionicons5'
import type { DataTableColumns } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { ItemRefType, ProcessRefType, reqAddProcess, reqGetPaitentByCard, reqGetPaitentByName } from './doctor.def'
import { timestampToDate } from '../patient/patient.def'

const searchData = ref<string>('')
const pInfo = reactive({
  pId:'',
  pName:'',
  pCardId:''
})
const pStartTime = ref<any>(null)
const ProcessRef = reactive<ProcessRefType>({
  pId: '',
  startTime: '',
  items: [{
    num: 0,
    name: '',
    doctor: '',
    status: 1,
    intervalTime: '',
    therapyAddress:''
  }]
})

const itemModel: ItemRefType = {
  num: 0,
  name: '',
  doctor: '',
  status: 1,
  intervalTime: '',
  therapyAddress:''
}

async function searchPatient() {
  if(searchData.value.length === 0) {
    actErr('搜索内容不能为空')
    return
  }
  let res
  if(!isNaN(Number(searchData.value[0]))) {
    if(searchData.value.length != 18) {
      actErr('身份证号格式不正确')
      return
    }
    res = await reqGetPaitentByCard(axiosReq, searchData.value)
    pInfo.pId = res.data.data.pId
    pInfo.pName = res.data.data.name
    pInfo.pCardId = res.data.data.cardId
  } else {
    res = await reqGetPaitentByName(axiosReq, searchData.value)
    pInfo.pId = res.data.data[0].pId
    pInfo.pName = res.data.data[0].name
    pInfo.pCardId = res.data.data[0].cardId
  }

  console.log(res)
}

function addItem() {
  ProcessRef.items.push(itemModel)
}

function upItem(index:number) {
  if(index == 0)
    return
  ProcessRef.items.splice(index - 1, 2, ProcessRef.items[index], ProcessRef.items[index - 1])
}

function downItem(index: number) {
  if (index < 0 || index >= ProcessRef.items.length - 1)
    return
  ProcessRef.items.splice(index, 2, ProcessRef.items[index + 1], ProcessRef.items[index])
}

function deleteItem(index: number) {
  if (index < 0 || index >= ProcessRef.items.length || ProcessRef.items.length === 1)
    return
  ProcessRef.items.splice(index, 1)
}

async function confirm() {
  const data:ProcessRefType = {
    pId : pInfo.pId,
    startTime : timestampToDate(pStartTime.value),
    items : []
  }
  for(let i = 0;i < ProcessRef.items.length;i++) {
    const item = {
      num: i + 1,
      name: ProcessRef.items[i].name,
      doctor: ProcessRef.items[i].doctor,
      status: 1,
      intervalTime: ProcessRef.items[i].intervalTime,
      therapyAddress: ProcessRef.items[i].therapyAddress
    }
    data.items.push(item)
  }
  console.log(data)
  const res = await reqAddProcess(axiosReq,data)
  console.log(res)
}
</script>

<style scoped>
.animal {
  cursor: pointer;
  transition: transform 0.3s;
}

.animal:hover {
    transform: scale(1.2); /* 鼠标悬停时放大 1.1 倍 */
}
</style>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
